<!-- https://juejin.cn/post/7144859921173970951 -->
<template>
  <div class="page">
    <input type='range'
           value=8
           id='size'
           min=1
           max=15
           class="size"
           @change="sizeChange" />
    <input type='range'
           value=8
           id='radius'
           min=0
           max=10
           class="radius"
           @change="radiusChange" />
    <div id='mario'
         class="mario" />
  </div>
</template>

<script setup  name="marioComponent">
const mario = document.getElementsByClassName('mario')

const sizeChange = (e) => {
	console.log(mario)
	mario[0].style.fontSize = e.target.value * 0.3 + 'vmin'
}
const radiusChange = (e) => {
	mario[0].style.borderRadius = e.target.value * 10 + '%'
}

// const red = 'red'
// const black = '#3e2d2b'
// const orange = '#fbba2d'
// const yellow = '#fcea3d'
// const blue = '#37448e'

// const define = [
// 	{ '6-11': red },
// 	{ '5-14': red },
// 	{ '5-7': black, '8-10': orange, 11: black, 12: orange },
// 	{ 4: black, 5: orange, '6-7': black, '8-10': orange, 11: black, '12-14': orange },
// 	{ 4: black, 5: orange, '6-7': black, '8-11': orange, 12: black, '13-15': orange },
// 	{ '4-5': black, '6-10': orange, '11-14': black },
// 	{ '6-13': orange },
// 	{ '5-6': red, '7-8': blue, '9-12': red },
// 	{ '4-6': red, '7-8': blue, '9-10': red, 11: blue, '12-14': red },
// 	{ '3-6': red, '7-8': blue, '9-10': red, 11: blue, '12-15': red },
// 	{ '2-4': orange, 5: red, 6: blue, '7-8': yellow, '9-10': blue, 11: yellow, 12: blue, 13: red, '14-16': orange },
// 	{ '2-5': orange, '6-12': blue, '13-16': orange },
// 	{ '2-4': orange, '5-13': blue, '14-16': orange },
// 	{ '2-4': orange, '5-13': blue, '14-16': orange },
// 	{ '5-7': blue, '11-13': blue },
// 	{ '4-6': black, '12-14': black },
// 	{ '3-6': black, '12-15': black }
// ]

// const output = define
// 	.map((lineDefine, row) => {
// 		let line = []
// 		for (const key in lineDefine) {
// 			const range = key.split('-')
// 			let [start, end] = range.map((v) => +v)
// 			if (!end) end = start
// 			// console.log(start, end, lineDefine[key]);
// 			for (let col = start; col <= end; col++) {
// 				// console.log(line);
// 				line.push(`${col}em ${row}em 1px ${lineDefine[key]}`)
// 			}
// 		}
// 		return line.join(',')
// 	})
// 	.join(',')
</script>

<style lang="less" scoped>
#mario {
	font-size: 0.8vmin;
	width: 1em;
	height: 1em;
	border-radius: 30%;
	margin-left: -17em;
	box-shadow: 6em 0em 1px red, 7em 0em 1px red, 8em 0em 1px red, 9em 0em 1px red, 10em 0em 1px red, 11em 0em 1px red,
		5em 1em 1px red, 6em 1em 1px red, 7em 1em 1px red, 8em 1em 1px red, 9em 1em 1px red, 10em 1em 1px red,
		11em 1em 1px red, 12em 1em 1px red, 13em 1em 1px red, 14em 1em 1px red, 11em 2em 1px #3e2d2b, 12em 2em 1px #fbba2d,
		5em 2em 1px #3e2d2b, 6em 2em 1px #3e2d2b, 7em 2em 1px #3e2d2b, 8em 2em 1px #fbba2d, 9em 2em 1px #fbba2d,
		10em 2em 1px #fbba2d, 4em 3em 1px #3e2d2b, 5em 3em 1px #fbba2d, 11em 3em 1px #3e2d2b, 6em 3em 1px #3e2d2b,
		7em 3em 1px #3e2d2b, 8em 3em 1px #fbba2d, 9em 3em 1px #fbba2d, 10em 3em 1px #fbba2d, 12em 3em 1px #fbba2d,
		13em 3em 1px #fbba2d, 14em 3em 1px #fbba2d, 4em 4em 1px #3e2d2b, 5em 4em 1px #fbba2d, 12em 4em 1px #3e2d2b,
		6em 4em 1px #3e2d2b, 7em 4em 1px #3e2d2b, 8em 4em 1px #fbba2d, 9em 4em 1px #fbba2d, 10em 4em 1px #fbba2d,
		11em 4em 1px #fbba2d, 13em 4em 1px #fbba2d, 14em 4em 1px #fbba2d, 15em 4em 1px #fbba2d, 4em 5em 1px #3e2d2b,
		5em 5em 1px #3e2d2b, 6em 5em 1px #fbba2d, 7em 5em 1px #fbba2d, 8em 5em 1px #fbba2d, 9em 5em 1px #fbba2d,
		10em 5em 1px #fbba2d, 11em 5em 1px #3e2d2b, 12em 5em 1px #3e2d2b, 13em 5em 1px #3e2d2b, 14em 5em 1px #3e2d2b,
		6em 6em 1px #fbba2d, 7em 6em 1px #fbba2d, 8em 6em 1px #fbba2d, 9em 6em 1px #fbba2d, 10em 6em 1px #fbba2d,
		11em 6em 1px #fbba2d, 12em 6em 1px #fbba2d, 13em 6em 1px #fbba2d, 5em 7em 1px red, 6em 7em 1px red,
		7em 7em 1px #37448e, 8em 7em 1px #37448e, 9em 7em 1px red, 10em 7em 1px red, 11em 7em 1px red, 12em 7em 1px red,
		11em 8em 1px #37448e, 4em 8em 1px red, 5em 8em 1px red, 6em 8em 1px red, 7em 8em 1px #37448e, 8em 8em 1px #37448e,
		9em 8em 1px red, 10em 8em 1px red, 12em 8em 1px red, 13em 8em 1px red, 14em 8em 1px red, 11em 9em 1px #37448e,
		3em 9em 1px red, 4em 9em 1px red, 5em 9em 1px red, 6em 9em 1px red, 7em 9em 1px #37448e, 8em 9em 1px #37448e,
		9em 9em 1px red, 10em 9em 1px red, 12em 9em 1px red, 13em 9em 1px red, 14em 9em 1px red, 15em 9em 1px red,
		5em 10em 1px red, 6em 10em 1px #37448e, 11em 10em 1px #fcea3d, 12em 10em 1px #37448e, 13em 10em 1px red,
		2em 10em 1px #fbba2d, 3em 10em 1px #fbba2d, 4em 10em 1px #fbba2d, 7em 10em 1px #fcea3d, 8em 10em 1px #fcea3d,
		9em 10em 1px #37448e, 10em 10em 1px #37448e, 14em 10em 1px #fbba2d, 15em 10em 1px #fbba2d, 16em 10em 1px #fbba2d,
		2em 11em 1px #fbba2d, 3em 11em 1px #fbba2d, 4em 11em 1px #fbba2d, 5em 11em 1px #fbba2d, 6em 11em 1px #37448e,
		7em 11em 1px #37448e, 8em 11em 1px #37448e, 9em 11em 1px #37448e, 10em 11em 1px #37448e, 11em 11em 1px #37448e,
		12em 11em 1px #37448e, 13em 11em 1px #fbba2d, 14em 11em 1px #fbba2d, 15em 11em 1px #fbba2d, 16em 11em 1px #fbba2d,
		2em 12em 1px #fbba2d, 3em 12em 1px #fbba2d, 4em 12em 1px #fbba2d, 5em 12em 1px #37448e, 6em 12em 1px #37448e,
		7em 12em 1px #37448e, 8em 12em 1px #37448e, 9em 12em 1px #37448e, 10em 12em 1px #37448e, 11em 12em 1px #37448e,
		12em 12em 1px #37448e, 13em 12em 1px #37448e, 14em 12em 1px #fbba2d, 15em 12em 1px #fbba2d, 16em 12em 1px #fbba2d,
		2em 13em 1px #fbba2d, 3em 13em 1px #fbba2d, 4em 13em 1px #fbba2d, 5em 13em 1px #37448e, 6em 13em 1px #37448e,
		7em 13em 1px #37448e, 8em 13em 1px #37448e, 9em 13em 1px #37448e, 10em 13em 1px #37448e, 11em 13em 1px #37448e,
		12em 13em 1px #37448e, 13em 13em 1px #37448e, 14em 13em 1px #fbba2d, 15em 13em 1px #fbba2d, 16em 13em 1px #fbba2d,
		5em 14em 1px #37448e, 6em 14em 1px #37448e, 7em 14em 1px #37448e, 11em 14em 1px #37448e, 12em 14em 1px #37448e,
		13em 14em 1px #37448e, 4em 15em 1px #3e2d2b, 5em 15em 1px #3e2d2b, 6em 15em 1px #3e2d2b, 12em 15em 1px #3e2d2b,
		13em 15em 1px #3e2d2b, 14em 15em 1px #3e2d2b, 3em 16em 1px #3e2d2b, 4em 16em 1px #3e2d2b, 5em 16em 1px #3e2d2b,
		6em 16em 1px #3e2d2b, 12em 16em 1px #3e2d2b, 13em 16em 1px #3e2d2b, 14em 16em 1px #3e2d2b, 15em 16em 1px #3e2d2b;
}
.page {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border: 1px solid #000;
}
</style>
